<template>
  <div class="tree-container"
       @contextmenu.prevent='()=>false'>
    <el-input placeholder="输入关键字进行过滤"
              v-model="filterText">
      <i slot="prefix"
         class="el-input__icon el-icon-search search"></i>
    </el-input>
    <div class="margin"></div>
    <el-tree :data="data"
             icon-class='custom'
             :props="defaultProps"
             ref="tree"
             :filter-node-method="filterNode"
             @node-click="handleNodeClick">
      <div class="custom-tree-node betweenbox"
           @contextmenu.prevent='contextmenuEvent(node.data)'
           slot-scope="{ node }">
        <div>

          <span>{{ node.label }}</span>
        </div>
        <div class="context-menu"
             @click.prevent="()=>false"
             v-show="node.data.menu"
             @click.stop='()=>false'
             @contextmenu.prevent='()=>false'>
          <span>添加</span>
          <span>重命名</span>
          <span>删除</span>

        </div>
      </div>
    </el-tree>

  </div>
</template>

<script lang="ts">
import { Component, Watch, Vue } from "vue-property-decorator";
import { Tree } from "element-ui";
interface treeItem {
  children?: treeItem[];
  menu: boolean;
  name: string;
}
interface menuData {
  menu?: boolean | undefined;
}
@Component
export default class extends Vue {
  defaultProps: Object = {
    children: "children",
    label: "name"
  };
  menuData: menuData = {
    menu: false
  };
  filterText: string = "";
  data: Array<treeItem> = [
    {
      name: "国网济南供电公司",
      menu: false,
      children: [
        {
          name: "济宁市供电公司",
          menu: false,

          children: [
            {
              name: "济宁市供电公司",
              menu: false
            }
          ]
        }
      ]
    },
    {
      name: "济宁市供电公司",
      menu: false,
      children: [
        {
          name: "青岛市供电公司",
          menu: false,
          children: [
            {
              menu: false,
              name: "青岛市供电公司"
            }
          ]
        },
        {
          name: "二级 2-2",
          menu: false,
          children: [
            {
              menu: false,
              name: "三级 2-2-1"
            }
          ]
        }
      ]
    }
  ];
  $refs!: {
    tree: Tree;
  };
  @Watch("filterText")
  private watchfilterText(val: string) {
    let tree = this.$refs.tree;
    // console.log(tree);
    
    if (tree) {
      tree.filter(val);
    }
  }

  private mounted(): void {
    window.addEventListener("click", this.hideMenu);
  }
  private destroyed(): void {
    window.removeEventListener("click", this.hideMenu);
  }
  handleNodeClick(data: Object) {
    this.hideMenu();
  }
  filterNode(value: string, data: { name: string }) {
    if (!value) return true;
    return data.name.indexOf(value) !== -1;
  }
  //隐藏当前右击事件组件
  hideMenu() {
    this.menuData.menu = false;
  }
  //   鼠标右击事件
  contextmenuEvent(data: { menu: boolean }) {
    this.hideMenu();
    data.menu = true;
    this.menuData = data;
  }
}
</script>

<style lang="scss" scoped>
.tree-container {
  .custom-tree-node {
    width: 100%;
    height: 0.3rem;
    box-sizing: border-box;
    line-height: 0.3rem;
    .context-menu {
      span {
        margin: 0rem 0.02rem;
      }
    }
  }
  .margin {
    height: 0.1rem;
  }
  .search {
    width: 0.3rem;
    height: 0.3rem;
    border-right: 1px solid #717ca1;
    color: #9eeaec;
  }
}
</style>

